<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<base href="${BaseContext }">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>视频列表 -视频管理</title>
	<script src = "/static/js/jquery.js"></script>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/video-js.css" rel="stylesheet" type="text/css">
<script src="/static/js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">视频管理系统</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="/behind/video/listVideo.jsp">视频管理</a></li>
					<li ><a href="/behind/video/speaker.jsp">主讲人管理</a></li>
					<li ><a href="/behind/video/classManage.jsp">课程管理</a></li>
				</ul>
			</div>
			<!--/.nav-collapse -->
		</div>
	</nav>

	<div class="container">
		<div class="jumbotron">
			<h2>编辑视频 - 视频管理</h2>
		</div>

		<form class="form-horizontal" action="#"
			method="post" enctype="multipart/form-data" id = "uploadForm">
			<div class="form-group">
				<label for="videoTitle" class="col-sm-2 control-label">视频标题</label>
					<div class="col-sm-10">
					<input type="text" class="form-control" name="videoTitle"
						id="title" placeholder="视频标题">
				</div>
			</div>

			<div class="form-group">
				<label for="speakerName" class="col-sm-2 control-label">主讲人</label>
				<div class="col-sm-10">
					<select name="speakerId" id="speakerId">
						<option value="" > - - 主讲人 - - </option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="courseTitle" class="col-sm-2 control-label">所属课程</label>
				<div class="col-sm-10">
					<select name="courseId" id="courseId">
						<option value="" > - - 课程 - - </option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="playTime" class="col-sm-2 control-label">视频时长</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" name="playTime"
						id="time" placeholder="视频时长">
				</div>
			</div>
			<div class="form-group">
				<label for="imageUrl" class="col-sm-2 control-label">封面图片</label>
				<div class="col-sm-10">
					<input type="file" class="form-control" name="image" id="image" onchange="fileUpLoadImage()">
					<img id="imageUrl" name = "imageUrl" width="150px" height="150px">
				</div>
			</div>

			<div class="form-group">
				<label for="videoUrl" class="col-sm-2 control-label">上传视频</label>
				<div class="col-sm-10">
					<input type="file" class="form-control" name = "video" id="video" onchange="fileUpLoadVideo()">
					<video loop controls autoplay  width="500px" height="350px"   id="videoUrl" name = "videoUrl"  class="video-js vjs-default-skin">
					</video>
				</div>
			</div>

			<div class="form-group">
				<label for="playNum" class="col-sm-2 control-label">视频次数</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" name="playNum" id="playNum"
						placeholder="播放次数" />
				</div>
			</div>

			<div class="form-group">
				<label for="videoDescription" class="col-sm-2 control-label">简介</label>
				<div class="col-sm-10">
					<textarea class="form-control" name="videoDesc"
						id="videoDesc" rows="3"></textarea>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn  btn-primary" onclick="return insert() ">保存</button>
					<a href="/behind/video/listVideo.jsp" class="btn btn-default">返回列表</a>
				</div>
			</div>
		</form>
	</div>
</body>
<script>
    function insert() {
        $("headImgUrl").attr("href", $("imgUrl").val());
        let json = {"title":$("#title").val(),"time":$("#time").val(),"imageUrl":$("#imageUrl").attr("src")
            ,"videoUrl":$("#videoUrl").attr("src"),"playNum":$("#playNum").val(),"detail":$("#videoDesc").val(),
            "spearkerId":$("#speakerId").val(),"courseId":$("#courseId").val()};
        $.ajax({
            url: "/video/insert",
            type: "POST",
            data: JSON.stringify(json),
            contentType: "application/json",
            success: function (data) {
                window.location = "/behind/video/listVideo.jsp";
            }
        });
        return false;
    }


	function fileUpLoadImage() {
        var formData = new FormData($("#uploadForm")[0]);
        $.ajax({
            url: '/video/fileuploadImage',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                $("#imageUrl").attr("src", data.data);
            }
        });
    }
	function fileUpLoadVideo() {
		var formData = new FormData($("#uploadForm")[0]);
		$.ajax({
			url: '/video/fileuploadVideo' ,
			type: 'POST',
			data: formData,
			async: false,
			cache: false,
			contentType: false,
			processData: false,
			success: function (data) {
				$("#videoUrl").attr("src",data.data);
				$("#videoUrl").attr("poster",data.data);
				let end = data.data.substring(data.data.indexOf(".")+1);
				console.log(end)

			}
		});
	}
    $(function () {
        $.ajax({
            url: "/video/speakerAll",
            type: "GET",
            success: function (data) {
                $.each(data.data[0],function (index,obj) {
                    $("#speakerId").append("<option value=\""+obj.id+"\">"+obj.speakerName+"</option>");
                });
                $.each(data.data[1],function (index,obj) {
                    $("#courseId").append("<option value=\""+obj.id+"\">"+obj.courseTitle+"</option>");
                });
            },
            error: function () {
                alert("服务器繁忙,请稍后再试!");
            }

        });

    });
</script>
</html>